<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="./icons/iconfont.css">
    <style type="text/css">
        * {
            touch-action: none;
        }
        body {
            padding: 0;
            margin: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        #layui {
            width: 100%;
            height: 100%;
            position: relative;
            padding-top: 25px;
        }

        .shot-bg {
            background: url("./img/scan/scan1.png") repeat-y fixed top;
            background-size: 100% 100%;
        }

        .vin-bg {
            background: url("./img/scan/scan1.png") repeat-y fixed top;
            background-size: 100% 100%;
        }

        .license-bg {
            background: url("./img/scan/scan2.png") repeat-y fixed top;
            background-size: 100% 100%;
        }

        .header {
            padding: 16px 0 16px 12px;
        }

        .iconfanhui {
            font-size: 12px;
            color: #fff;
        }

        .tab {
            display: flex;
            justify-content: space-between;
            margin: 0 52px;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.5);
        }

        .active {
            color: #fff;
        }

        #shot-text {
            position: absolute;
            top: 365px;
            font-size: 16px;
            color: #fff;
            text-align: center;
            width: 100%;
        }

        #foot {
            position: absolute;
            bottom: 60px;
            right: 60px;
            left: 60px;
            clear: both;
            font-size: 16px;
            color: #fff;
            text-align: center;
        }

        .photo {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
        }

        .iconvin-xiangce {
            font-size: 22px;
        }

        .iconpaizhao {
            font-size: 65px;
        }
    </style>
</head>
<body>
<div id="layui" class="shot-bg">
    <div class="header">
        <span class="iconfont iconfanhui" id="back" ></span>
    </div>
    <div class="tab" id="tab">
        <div id="shot" class="active">车牌</div>
        <div id="vin">VIN</div>
        <div id="license">行驶证识别</div>
    </div>
    <div id="shot-text">将车牌号放入框内，点击拍照进行识别</div>
    <div id="foot">
        <span class="iconfont iconpaizhao" id="takePhoto"></span>
        <div class="photo" id="selectPhoto">
            <span class="iconfont iconvin-xiangce" ></span>
            <div>相册</div>
        </div>

    </div>
</div>

<script type="text/javascript">
  window.onload = function() {
    let activeTab = 'shot' //当前选择tab shot 车牌 selectPhoto vin license 行驶证
    const type = GetQueryValue('type')

    if (type === 'vin') {//仅Vin扫描
      document.getElementById('tab').style.display = 'none';
      document.getElementById('shot-text').innerText = '将VIN放入框内，点击拍照进行识别';
      activeTab = 'vin';
    } else if(type === 'shot'){ //仅车牌扫码
      document.getElementById('tab').style.display = 'none';
    } else {
      //tab切换监听
      document.getElementById("tab").addEventListener('click', (e) => {
        const el = e.target
        if (el.id === activeTab || el.id === 'vin' || el.id === 'tab') {
          return
        }
        document.getElementById('layui').removeAttribute('class', `${activeTab}-bg`);
        document.getElementById('layui').setAttribute('class', `${el.id}-bg`);
        document.getElementById(activeTab).removeAttribute('class', 'active');
        el.setAttribute('class', 'active');
        activeTab = el.id;
      })
    }
    //ios默认事件处理
    let lastTouchEnd = 0;
    document.addEventListener('touchstart', function(event) {
      if (event.touches.length > 1) {
        event.preventDefault();
      }
    });
    document.addEventListener('touchend', function(event) {
      let now = (new Date()).getTime(); if (now - lastTouchEnd <= 300) {
        event.preventDefault();
      } lastTouchEnd = now;
    }, false);
    // 阻止双指放大
    document.addEventListener('gesturestart', function(event) {
      event.preventDefault();
    })

    document.body.addEventListener('touchmove', function (e) {
      e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
    }, {passive: false});

    document.addEventListener("plusready", function () {
      //扩展API加载完成事
      let currentWebview = plus.webview.currentWebview()
      const pusher = plus.video.getLivePusherById('livePusher')

      //拍照
      document.getElementById('takePhoto').addEventListener('click', function () {
        pusher.snapshot(
          res => {
            plus.storage.setItem('isVal', 'file://' + res.tempImagePath)
            plus.webview.close(currentWebview, 'auto', 500)
          },
          err => {
            console.log('快照失败', JSON.stringify(err))
          }
        )
      })

      //选照片
      document.querySelector('#selectPhoto').addEventListener('click', (e) => {
        plus.gallery.pick((res) => {
          console.log('单选图片')
          console.log(res)
          plus.storage.setItem('isVal', res)
          plus.webview.close(currentWebview, 'auto', 500)
        }, () => {
        }, {
          filter: 'image',
          multiple: false,
          maximum: 1
        })
      })

      //返回
      document.getElementById('back').addEventListener('click', function () {
        plus.webview.close(currentWebview, 'auto', 500)
      })

    });

    //获取url参数
    function GetQueryValue(queryName) {
      const query = decodeURI(window.location.search.substring(1));
      const vars = query.split("&");
      for (let i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == queryName) {
          return pair[1];
        }
      }
      return null;
    }
  }
</script>
</body>
</html>